<template>
  <div>
    <div class="p-2 bg-white mb-2 rounded">
      <el-button type="primary" @click="toEdit({}, 'query')">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column prop="news_id" label="id" width="100" align="center" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="cover" label="封面" width="150" align="center">
        <template #default="scope">
          <el-image
            v-if="scope.row.cover"
            :src="scope.row.cover"
            fit="cover"
            style="width: 80px"
            :preview-src-list="[scope.row.cover]"
            preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="400" align="center">
        <template #default="scope">
          <el-button plain @click="openDetails(scope.row.news_id)">
            <span>详情</span>
          </el-button>
          <el-button
            plain
            type="warning"
            @click="toEdit({ news_id: scope.row.news_id }, 'query')"
            >修改</el-button
          >
          <el-button plain type="danger" @click="onNewsDel(scope.row.news_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { newsList, NewsDelete } from "@/api/information";
import { useDetail } from "./hooks";
import { ElMessage, ElMessageBox } from "element-plus";

const { toEdit } = useDetail();
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const disabled = ref(false);
const background = ref(true);
const total = ref(0);
const handleSizeChange = val => {
  console.log(`${val} items per page`);
  getNewsList();
};
const handleCurrentChange = val => {
  console.log(`current page: ${val}`);
  getNewsList();
};
// 获取新闻列表
const tableData = ref([]);
function getNewsList() {
  newsList({
    page: currentPage.value,
    limit: pageSize.value
  }).then(res => {
    console.log(res);
    total.value = res.total;
    tableData.value = res.data;
  });
}
getNewsList();

// 获取全局 $drawer
const drawer = inject("drawer");
// 详情
const openDetails = id => {
  const newsInfo = tableData.value.find(item => item.news_id === id);
  drawer.open({
    component: "newDetails", // 传递组件标识
    props: { data: newsInfo }, // 动态参数
    title: `详情 - 新闻资讯` // 抽屉标题
  });
};
// 删除
const onNewsDel = id => {
  ElMessageBox.confirm("此操作将永久删除该资讯, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      return NewsDelete({ news_id: id });
    })
    .then(res => {
      // 删除操作
      if (res.code == 1) {
        this.tableData = this.tableData.filter(item => item.news_id !== id);
        ElMessage({
          type: "success",
          message: "删除成功!"
        });
      } else {
        ElMessage({
          type: "error",
          message: "删除失败!"
        });
      }
    })
    .catch(err => {
      console.error(err);
      ElMessage({
        type: "info",
        message: "已取消删除"
      });
    });
};
</script>
<style scoped lang="scss"></style>
